<template>
    <div ref="refsSearchPicturePreviewDetailComponentBox" class="picture-preview-detail-box">
        <h1 class="picture-view-box-title">{{ pictureContentView.index.title }}</h1>
        <div class="picture-view-box" :style="`height: ${mainHeight}px`" >
            <div class="picture-preview-box" >
                <template v-for="(item, index) in pictureContentView.fileList" :key="index">
                    <div>
                        <el-image :class="[
                                pictureContentView.currentIndex === index ? 'picture-preview-box-img-is-active' : '',
                                'picture-preview-box-img',
                                'picture-preview-box-img-hover'
                            ]" 
                            @click="handleSelectImg(index)" 
                            fit="fill" 
                            :src="item.fullPath" 
                        />
                    </div>
                </template>
            </div>
            <el-carousel 
                ref="refsPictureCarousel" 
                class="picture-view-carousel picture-view-carousel-image-hover"
                indicator-position="none" 
                @change="handleImgChange" 
                :autoplay="false" 
                :loop="false"
            >
                <template v-for="(item, index) in pictureContentView.fileList" :key="index">
                    <el-carousel-item :name="new String(index)">
                        <el-image 
                            class="picture-view-carousel-image" 
                            fit="fill" 
                            :src="item.fullPath"
                        />
                    </el-carousel-item>
                </template>
            </el-carousel>
        </div>

    </div>
</template>
  
<script>
import { PictureContentView } from '@/views/index.js'
export default {
    beforeUpdate() {
        this.$nextTick(() => {
            const refsSearchPicturePreviewDetailComponentBox = this.$refs.refsSearchPicturePreviewDetailComponentBox
            const refsSearchHeader = this.$refs.refsSearchPicturePreviewDetailComponentBox.parentElement.parentElement.parentElement.firstElementChild
            const refsSearchTab = this.$refs.refsSearchPicturePreviewDetailComponentBox.parentElement.firstElementChild
            const refsSearchFooter = this.$refs.refsSearchPicturePreviewDetailComponentBox.parentElement.parentElement.parentElement.children[2]
            this.mainHeight = document.body.offsetHeight
                - refsSearchHeader.offsetHeight
                - refsSearchTab.offsetHeight
                - refsSearchFooter.offsetHeight
                - refsSearchPicturePreviewDetailComponentBox.firstElementChild.offsetHeight
        })
    },
    beforeCreate() {/* */},
    beforeMount() {
        this.$nextTick(() => {
            // 根据浏览器高度设置初始高度
            const refsSearchPicturePreviewDetailComponentBox = this.$refs.refsSearchPicturePreviewDetailComponentBox
            const refsSearchHeader = this.$refs.refsSearchPicturePreviewDetailComponentBox.parentElement.parentElement.parentElement.firstElementChild
            const refsSearchTab = this.$refs.refsSearchPicturePreviewDetailComponentBox.parentElement.firstElementChild
            const refsSearchFooter = this.$refs.refsSearchPicturePreviewDetailComponentBox.parentElement.parentElement.parentElement.children[2]
            // 监听浏览器高度变化，修改表格高度
            this.mainHeight = document.body.offsetHeight
                    - refsSearchHeader.offsetHeight
                    - refsSearchTab.offsetHeight
                    - refsSearchFooter.offsetHeight
                    - refsSearchPicturePreviewDetailComponentBox.firstElementChild.offsetHeight
            window.addEventListener('resize', () => {
                this.mainHeight = document.body.offsetHeight
                    - refsSearchHeader.offsetHeight
                    - refsSearchTab.offsetHeight
                    - refsSearchFooter.offsetHeight
                    - refsSearchPicturePreviewDetailComponentBox.firstElementChild.offsetHeight
            })
        })
    },
    methods: {
        handleSelectImg(index) {
            this.$refs.refsPictureCarousel.setActiveItem(index)
        },
        handleImgChange(index) {
            this.pictureContentView.updateCurrentIndex(index)
        },
        handlePreviewSwitch(index) {
            this.$refs.refsPictureCarousel.setActiveItem(index)
        }
    },
    props:{
        pictureContentView :{
            type: PictureContentView,
            default: PictureContentView.defaultView
        }
    },
    data() {
        return {
            mainHeight: 0,
        }
    }
}
</script>
  
<style>
.picture-preview-detail-box {
    background-color: #1E1E1E;
}
.picture-view-box {
    display: flex;
    justify-content: space-around;
}
.picture-view-box-title {
    margin: 0 !important;
    color: #FFB27D;
}

.picture-preview-box {
    width: auto;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    overflow-y: scroll;
    border-top: 5px solid #414141;
    border-bottom: 5px solid #414141;
    border-left: 5px solid #414141;
    border-radius: 5px;
    background-color: black;
    margin-bottom: 20px;
}

.picture-preview-box-img {
    height: 120px;
    width: 120px;
    border-radius: 5px;
    cursor: pointer;
}

.picture-preview-box-img-hover:hover {
    box-shadow: 0px 0px 4px 0.5px #DCDCAA;
}

.picture-preview-box-img-is-active {
    box-shadow: 0px 0px 4px 0.5px #DCDCAA;
}

.picture-view-carousel .el-carousel__arrow--left:hover,
.picture-view-carousel .el-carousel__arrow--right:hover {
    background-color: #333333;
}

.picture-view-carousel {
    margin-top: 10px;
    margin-bottom: auto;
}

.picture-view-carousel,
.picture-view-carousel .el-carousel__item,
.picture-view-carousel-image {
    height: 400px !important;
    width: 600px !important;
}

.picture-view-carousel-image-hover:hover {
    box-shadow: 0px 0px 3px 0.5px white;
}
</style>